<template>
	<view class="nearShop">
		<u-popup :show="showPop" mode="bottom" height="110px" customStyle="width:100%" :round="10" @close="close"
			:overlay="false">
			<view class="p-2">
				<view class="p-2-top" @click="collapse = !collapse">
					<u-icon
						:name="collapse ? 'arrow-up' : 'arrow-down'"
						:size="23"
						color="#ccc"
					/>
				</view>
				<scroll-view :style="{'max-height': collapse ? '230rpx' : '600rpx', 'transition': 'all 0.5s' }" :scroll-y="true" @scrolltolower="lower">
					<view class="recommend f-column">
						<view class="list f-column" v-for="(item,index) in list" :key="index"
							@click="goDetails(item.id)">
							<view class="list_item" :style="{background:'#fff'}">
								<view class="content">
									<view class="item">
										<view class="icon">
											<image :src="item.logo" mode="" class="image" v-if="item.logo"></image>
											<image src="../../static/images/index/im.jpg"  mode="" class="image" v-else></image>
										</view>
										<view class="entityList">
											<view class="num" style="font-size: 32rpx;">
												<text>{{item.name || '--'}}</text>
												<image src="../../static/images/near/qyLogo.png" mode="heightFix">
											</view>
											<view class="name">
												<text>{{item.address || '-'}}</text>
												<view class="right">
													<image src="../../static/icon/my/goIcon.png" mode="" class="image">
													</image>
													<text class="themeColor">{{item.distance || 0 }}km</text>
												</view>
											</view>
											<view>
												<text v-if="item.openswitch == 1" class="tag">正常营业</text>
												<text v-if="item.openswitch == 2" class="tag error">未营业</text>
												<text v-if="item.fly_id != '0'" class="tag">空闲:{{ item.machine[1].value || 0}}台</text>
												<text v-if="item.fly_id != '0'" class="tag">总数:{{ item.machine[0].value || 0}}台</text>
											</view>
										</view>
									</view>
									<view class="conBot">
										<view class="f-row " >
											<view class="down" v-if="item.is_trila !=1">
												<view class="">
													优惠价
												</view>
												<view class="">
													
												</view>
											</view>
											<view class="down_price" v-if="item.goods.length!=0&&item.is_trila !=1">
												¥{{item.goods[0].actual_payment || 0}}
											</view>
											<view class="price" v-if="item.goods.length!=0">
												原价¥{{item.goods[0].price || 0}}
											</view>
										</view>
										<view class="f-row goNear" @click.stop="getOpenMap(item)">
											<image src="../../static/images/index/btnBg.png" mode="widthFix"
												style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
											<view class="">
												前往洗车
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		usableCoupons
	} from '@/request/api.js'
	export default {
		props: ['showPop', 'title', 'tip', 'listData', 'nearShopList'],
		data() {
			return {
				list: [],
				collapse: true, // 是否折叠列表
			}
		},
		watch: {
			listData: {
				handler(newVal) {
					this.list = newVal
				},
				deep: true
			},
		},
		methods: {
			goDetails(e) {
				this.$emit('clearType')
				uni.navigateTo({
					url: `/pages/index/productDetails?id=` + e,
				})
			},
			close() {
				this.$emit('refuse', true)
			},
			lower(e) {
				this.$emit('upDateList')
			},
			checkedType(i) {
				this.list.forEach((item, index) => {
					if (index != i) {
						item['checked'] = false
					} else {
						item['checked'] = !item['checked']
						this.price = item.price
					}
				})
				// this.listData[i].checked = !this.listData[i].checked
				this.$emit('upDateCheck', this.list)
				// this.$forceUpdate()
				console.log(this.list, '勾选的列表1')
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			submit() {
				let data = null
				let btn = false
				this.listData.forEach(item => {
					if (item['checked'] == true) {
						data = item
						btn = true
					}
				})
				if (!btn) {
					uni.showToast({
						icon: 'none',
						title: '请勾选需要的卡卷'
					})
					return false;
				}
				this.$emit('submit', data)
				this.value = ''
			},
			refuse() {
				this.$emit('refuse', true)
			},

		}
	}
</script>

<style scoped lang="scss">
	.p-2-top {
		display: flex;
		justify-content: center;
	}
	.recommend {
		font-size: 28rpx;

		.title {
			font-size: 30rpx;
			line-height: 20px;
			color: #222222;
			font-weight: 600;
		}

		.list {
			margin-bottom: 20rpx;

			.content {
				background-color: #fff;
				border-radius: 10px;

				.conBot {
					align-items: center;

					.f-row {
						display: flex;
						align-items: flex-end;
					}

					.goNear {
						background: #2CB9A4;
						color: #fff;
						height: 60rpx;
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
						padding: 2rpx 10rpx;
						font-size: 26rpx;
						align-items: center;
					}

					display: flex;
					justify-content: space-between;
					color: #2CB9A4;

					.down {
						background: #C0EAE4;
						justify-content: center;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 4rpx 10rpx;
						font-size: 22rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

					.down_price {
						margin-right: 10rpx;
						font-weight: 600;
						font-size: 30rpx;
						color: #FF6666;
					}
					
					.price {
						margin-right: 10rpx;
						font-size: 28rpx;
						color: #979797;
					}
				}
			}

			.list_item {
				display: flex;
				flex-direction: column;
				background: #2CB9A4;
				border-radius: 20rpx;
				border: 0.5px solid #FF954E;
				padding-bottom: 20rpx;
				padding-top: 20rpx;

				.title {
					color: #fff;
					font-size: 30rpx;
					font-weight: 600;
				}

				.item {
					display: flex;
					color: #505050;
					margin: 15rpx 0;
					border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
					padding-bottom: 15rpx;
					box-sizing: border-box;
					background: #fff;
					border-radius: 20rpx;

					.icon {
						width: 140rpx;
						height: 140rpx;

						.image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.entityList {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						text-overflow: ellipsis;
						justify-content: space-between;

						.name {
							display: flex;
							justify-content: space-between;
							margin-left: 15rpx;
							white-space: nowrap;
							overflow: hidden;
							color: #BABABA;
							font-size: 25rpx;
							align-items: center;

							text {
								flex: 1;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}

							.right {
								width: 136rpx;
								font-size: 28rpx;
								display: flex;
								align-items: center;
								background: #f9f9f9;
								padding: 4rpx 20rpx;
								border-radius: 10px;
							}

							.image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}
						}

						.num {
							margin-left: 15rpx;
							margin-top: 5rpx;
							color: #1D1B20;
							font-size: 28rpx;
							white-space: nowrap;
							display: flex;
							justify-content: space-between;
							align-items: center;

							image {
								height: 36rpx;
							}
						}
					}
				}
			}
		}
	}

	::v-deep .u-icon {
		display: inline !important;
	}

	.mypop {
		width: 90%;
	}

	.scroll-content {
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			border-bottom: 0.5rpx solid rgba(217, 217, 217, 0.6);
			padding-bottom: 40rpx;

			.item {
				text-align: center;
				background: #F6F6F6;
				border-radius: 8px;

				.top1 {
					color: #081738;
					font-size: 34rpx;
				}

				.top2 {
					color: #979797;
					font-size: 28rpx;
				}
			}
		}

		.center {
			padding-bottom: 40rpx;
			padding-top: 20rpx;

			.title {}

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					display: flex;
					justify-content: space-between;
					background: #C0EAE4;
					border-radius: 10px;
					width: 78%;
					padding: 30rpx;
					color: #2CB9A4;
					margin-right: 20rpx;
					margin-top: 20rpx;

					.name {}

					.price {}
				}

				.check {}
			}
		}

		.bottom {}
	}
	.tag {
		background-color: #2cb9a4;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #fff;
		display: inline-block;
		margin-left: 16rpx;
	}
	.error {
		background-color: #FF6666;
	}
</style>